<template>
  <div class="lend_goods_mobile_wrap">
    <div class="nav_box">
      <van-nav-bar title="归还货品" left-text="返回" left-arrow @click-left="returnClick" />
    </div>

    <!-- 占位盒子 -->
    <div class="placeholder_box_top"></div>

    <div class="lend_goods_mobile_box">
      <!-- 借出货品内容 -->
      <div class="lend_good_content_box">
        <div class="lend_good_item_box" v-for="(good, indexG) in lendGoodStore.lendGoodsData" :key="indexG">
          <div class="title_box">
            <img class="good_icon" src="./image/good.svg" alt="" />
            <span class="title_text">
              {{ "货品" + (indexG + 1) }}
            </span>
          </div>
          <div class="good_main_box">
            <!-- <div class="good_field_box">
            <span class="label">货品名称</span>
            <span class="value"></span>
          </div> -->
            <van-cell-group class="lend_good_cell_g" inset>
              <van-field
                label-align="left"
                input-align="right"
                v-model="good.name"
                label="货品名称"
                placeholder="点击选择货品"
                @click="goodSelectClick(good)"
              />
              <van-field
                :disabled="good.name == '' || good.name == null || good.name == undefined"
                label-align="left"
                input-align="right"
                v-model="good.makeQuantity"
                type="digit"
                label="归还数量"
                placeholder="请输入归还数量"
                :max="good.lendQuantity"
                :min="0"
              />
              <span class="may_quantity_text">{{ `已借数量:${good.lendQuantity ? good.lendQuantity : 0}` }}</span>
              <van-field
                label-align="left"
                input-align="right"
                v-model="good.lendReturnDesc"
                rows="2"
                autosize
                label="备注"
                type="textarea"
                maxlength="50"
                placeholder="请输入备注"
                show-word-limit
              />
            </van-cell-group>
          </div>
          <van-button
            icon="delete-o"
            style="width: 100%; margin-top: 20px"
            type="danger"
            size="small"
            @click="delGoodClick(good, indexG)"
            >删除货品</van-button
          >
        </div>
      </div>

      <!-- 添加借出货品按钮 -->
      <van-button plain type="primary" icon="plus" class="add_good_btn" @click="lendGoodStore.goodGoodClick">添加货品</van-button>

      <!-- 占位盒子 -->
      <div class="placeholder_box"></div>

      <div class="lend_confirm_action_box">
        <van-button icon="success" class="confirm_lend_btn" type="success" @click="confirmLendClick">确认归还</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
import { showConfirmDialog, showToast } from "vant";
import "./index.scss";
export default defineComponent({
  name: "ReturnGoodsMobile"
});
</script>
<script setup>
import { useRouter } from "vue-router";
// import { v4 as uuidv4 } from "uuid";
import { useLendGoodStore } from "@/stores/modules/lendGood";
import { returnTbGoodsApi } from "@/api/modules/goods/index";
import { v4 as uuidv4 } from "uuid";

const lendGoodStore = useLendGoodStore();
const router = useRouter();

// 返回点击事件
const returnClick = () => {
  router.back();
};

// 确认借出点击事件
const confirmLendClick = () => {
  // 判断最后一个货品是否填写完整
  // 添加前先判断上一个货品信息是否填写完整
  let lastGood = lendGoodStore.lendGoodsData[lendGoodStore.lendGoodsData.length - 1];

  if (lastGood.id != null && lastGood.makeQuantity != 0 && lastGood.makeQuantity != null) {
  } else {
    if (lastGood.makeQuantity == 0) {
      showToast(`货品${lendGoodStore.lendGoodsData.length} 的数量不能为0`);
    } else {
      showToast(`请将 货品${lendGoodStore.lendGoodsData.length} 填写完整`);
    }
    return;
  }

  showConfirmDialog({
    title: "提示",
    message: `确定要归还货品吗?   `
  })
    .then(() => {
      lendGoodFunc();
    })
    .catch(() => {});
};

// 借出货品请求
const lendGoodFunc = async () => {
  let sData = lendGoodStore.lendGoodsData.map(item => {
    return {
      id: item.id,
      makeQuantity: item.makeQuantity,
      lendReturnDesc: item.lendReturnDesc
    };
  });
  await returnTbGoodsApi(sData).then(res => {
    if (res.result == "success") {
      showToast(res.msg);
      lendGoodStore.lendGoodsData = [
        {
          gid: uuidv4(),
          id: null,
          name: "",
          makeQuantity: 0,
          quantity: 0,
          lendQuantity: 0,
          lendReturnDesc: ""
        }
      ];

      setTimeout(() => {
        router.back();
      }, 500);
    } else if (res.result == "error") {
      showToast(res.msg);
    }
  });
};

// 删除货品点击事件
const delGoodClick = (good, index) => {
  // 先判断是否是最后一个货品
  if (index == 0) {
    showToast("最后一个货品禁止删除");
    return;
  }

  showConfirmDialog({
    title: "提示",
    message: `确定要删除 货品${index + 1} 吗?   `
  })
    .then(() => {
      lendGoodStore.delGood(good);
    })
    .catch(() => {});
};

// 货品选择点击事件
const goodSelectClick = good => {
  router.push({
    path: "/selectGood/index"
  });
  lendGoodStore.currentSelectGoodGId = good.gid;
};

// init
onMounted(() => {
  lendGoodStore.selectTbGoodsByPageFunc();
});
</script>

<style lang="scss" scoped></style>
